<template>
  <div id="wrapper" class="wrapper" @click="click">
    <AppHeader @changePassword="showPasswordDialog"></AppHeader>
    <AppSidebar></AppSidebar>
    <AppContent></AppContent>
    <AppFooter></AppFooter>

    <!--全局对话框-->
    <el-dialog title="修改密码" size="tiny" v-model="isPasswordDialogVisible" @close="isPasswordDialogVisible=false" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" label-width="150px">
        <el-form-item label="旧密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="form.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input type="password" v-model="form.confirmPassword" placeholder="请再输入一次新密码"></el-input>
        </el-form-item>
      </el-form>

      <!--表单按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isPasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword" :loading="isChanging">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AppHeader from '../../components/parts/AppHeader'
  import AppContent from '../../components/parts/AppContent.vue'
  import AppSidebar from '../../components/parts/AppSidebar'
  import AppFooter from '../../components/parts/AppFooter'
  import {SET_NAV_DROP_DOWN,SET_TAB_BAR_DROP_DOWN} from '../../store/mutationTypes'
  import {doGet} from "../../assets/js/utils/RequestUtils"
  import {SUCCESS} from "../../assets/js/enum/RequestResult"

  const PASSWORD_CHECK_URL = "/sys/user/checkPassword";

  const UPDATE_PASSWORD_URL = "/sys/user/updatePassword";
  export default {
    name: 'MainPage',
    data() {
      /** 密码校验 */
      let passwordValidator = (rule, value, callback) => {
        doGet(PASSWORD_CHECK_URL, {data:{password:value}, component:this})
          .then(response=>{
            if(response.status === SUCCESS) {
              callback();
            } else {
              callback(new Error("密码错误!"));
            }
          })
      };

      /** 输入新密码校验 */
      let confirmPasswordValidator = (rule, value, callback) => {
        if(value === this.form.newPassword) {
          callback();
        } else {
          callback(new Error("两次输入的密码不一致!"))
        }
      };

      return {
        isPasswordDialogVisible:false,
        form:{},
        rules:{
          password:[
            {required:true, message:"请输入旧密码", trigger:"blur"},
            {validator:passwordValidator, trigger:"blur"}
          ],
          newPassword:[
            {required:true, message:"请输入新密码", trigger:"blur"}
          ],
          confirmPassword:[
            {required:true, message:"请输入确认新密码", trigger:"blur"},
            {validator:confirmPasswordValidator, trigger:"blur"}
          ]
        },
        isChanging:false
      }
    },
    methods: {
      showPasswordDialog() {
        this.isPasswordDialogVisible = true;
        this.form = {};
      },
      changePassword() {
        this.$refs["form"].validate(valid=>{
          if(valid) {
            this.isChanging = true;
            doGet(UPDATE_PASSWORD_URL, {data:{password:this.form.newPassword}, component:this})
              .then(response=>{
                if(response.status === SUCCESS) {
                  this.$message({message: response.message, type: response.status.toLowerCase()});
                  this.isPasswordDialogVisible = false;
                } else {
                  this.$alert(response.message, "提示", {confirmButtonText:"确定"})
                }
              })
              .finally(()=>this.isChanging = false);
          }
        });
      },
      click() {
        this.$store.commit(SET_NAV_DROP_DOWN, false);
        this.$store.commit(SET_TAB_BAR_DROP_DOWN, false);
      }
    },
    components:{AppHeader,AppContent,AppSidebar,AppFooter}
  }
</script>



// WEBPACK FOOTER //
// MainPage.vue?aa4037bc
